<template>
<div class="page-trade">
    <header class='head mu-elevation-4' style="position: fixed; z-index: 100;">我的理财产品</header>
    <div style="height: 56px;"></div>
    <div class="no_trade" v-if="!conut">
        <p class="p_1">还没预约任何产品</p>
        <div class="load_more">
            <router-link to="/invest">
                <div class="btn"><i class="mu-icon material-icons">directions_run</i>马上去邀请</div>
            </router-link>
        </div>
    </div>
    <div class="trade" v-if="conut">
        <h2>凯里市文旅投2018年直接融资工具(第一期)<span>【凯里市文旅投】</span></h2>
        <div v-if="dataList.length">
            <CancelProduct :data='dataList' :update="changeProduct" :title="title"></CancelProduct>
        </div>
        <footer class="foot"></footer>
    </div>
    <bottomNav></bottomNav>
</div>
</template>

<script>
    // 引入底部导航组件
    import BottomNav from '@c/BottomNav';
    // 引入商品列表组件
    import CancelProduct from "@/components/CancelProduct";
    // 暴露接口
    export default {
        // 注册组件
        components: { BottomNav, CancelProduct },
        // 数据
        data() {
            return {
                // 产品数据
                dataList: []
            }
        },
        computed: {
            // 产品数量
            conut() {
                return this.dataList.length;
            },
            title() {
                // 定义结果变量
                let result = [];
                for (let i of this.dataList) {
                    if(result.indexOf(i.title) === -1) {
                        result.push(i.title);
                    }
                }
                console.log(result);
                return result;
            }
        },
        // 自定义方法
        methods: {
            // 取消邀请
            changeProduct(id) {
                if(id > 0) {
                    this.dataList = this.dataList.filter(item => item.id != id)
                }
                // 更新产品数量
            }
        },
        /* 生命周期方法 */
		// 组件创建前
		beforeCreate() {
			// 检测 token 是否存在
			localStorage.getItem('token') || this.$router.push('/login');
        },
        // 组件创建
        created() {
            // 显示加载动画并保存至句柄变量
			const loading = this.$loading();
            // 发送请求
            this.$http({
                method: "POST",
                url: "/api/product/list"
            })
            // 状态监听
            .finally(() => {
                // 关闭动画
                loading && loading.close();
            })
            // 成功监听
            .then(({ data: { code, msg, data } }) => {
                // 处理数据
                if(code == 0) {
                    // 过滤数据
                    this.dataList = data.filter((item) => {
                        return (item.hasBooked == true)
                    })
                }
            })
            // 错误监听
			.catch(err => console.log(err));
        }
    }

</script>
<style lang="scss">
.page-trade {
    .head {
        width: 100%;
        height: 56px;
        line-height: 56px;
        background-color: rgb(41, 182, 246);
        color: #fff;
        text-align: center;
        padding: 0 16px;
        font-size: 20px;
    }
    .no_trade {
        text-align: center;
        .p_1 {
            font-size: 16px;
            padding: 60px;
            color: #999;
        }
        .load_more {
            padding: 20px 40px;
            .btn {
                width: 100%;
                height: 44px;
                line-height: 44px;
                font-size: 16px;
                min-width: 88px;
                border-radius: 2px;
                background-color: rgb(67, 160, 71);
                color: #fff;
                text-align: center;
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
                .mu-icon {
                    font-size: 28px;
                }
            }
        }
    }
    .trade {
        padding-bottom: 25px;
        border-radius: 2px;
        color: rgba(0,0,0,.87);
        font-weight: 400;
        h2 {
            font-size: 16px;
            padding: 12px 24px 0 10px;
            border-left: 3px solid #1976d2;
            min-height: 64px;
            span {
                font-size: 14px;
            }
        }
    }
    .foot {
        height: 30px;
    }
}
</style>